前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系 繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前一篇會繼續介紹 React Router

1. 404Page
2. Nest Route

這一篇也會繼續介紹 React Router

1. useRoutes 使用方式
2. useParams 使用方式
3. useNavigate 使用方式

useRoutes 使用方式

先來複習一下上一篇，最後如果想要設置路徑以及子路徑，程式碼如下

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import {
    Home, About, Events, Products, Contact, History, Services, Location
} from './Page'
import { Page404 } from './Page404'


export default function App() {
    return (
        <div>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} >
                    <Route path='/history' element={<History />} />
                    <Route path='/services' element={<Services />} />
                    <Route path='/location' element={<Location />} />
                </Route>
                <Route path='/event' element={<Events />} />
                <Route path='/product' element={<Products />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='*' element={<Page404 />} />
            </Routes>
        </div>
    )
}

同時會使用Routes 以及 Route 元件，來建構出全部路徑

我們也可以選擇另一種方式，就是使用 useRoutes 這個Hook

import React from 'react'
import { useRoutes } from 'react-router-dom'
import {
    Home, About, Events, Products, Contact, History, Services, Location
} from './Page'
import { Page404 } from './Page404'


export default function App() {
    let element = useRoutes([
        { path: '/', element: <Home /> },
        {
            path: 'about', element: <About />,
            children: [
                { path: 'history', element: <History /> },
                { path: 'services', element: <Services /> },
                { path: 'location', element: <Location /> },
            ]
        },
        { path: 'event', element: <Events /> },
        { path: 'product', element: <Products /> },
        { path: 'contact', element: <Contact /> },
        { path: 'product', element: <Products /> },
        { path: '*', element: <Page404 /> },
    ])
    return element
}

這邊直接透過程式碼建構出一個帶有 path以及element的物件

並且將物件傳入至 useRoutes 就可以快速建立前面的Routes物件

useParams 使用方式

這邊先來看一下官方文件的使用方法

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

useParams 為官方所建立的Hook，可以回傳一些特定的參數

以上面為例子，可以透過url的參數，傳入至 ProfilePage

因此如果在頁面中輸入對應的 userId 就會導入至 ProfilePage

則在對應的頁面中就可以獲得userId的變數

useNavigate 使用方式

這邊一樣先來看一下官方的使用方法

import { useNavigate } from "react-router-dom";

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

useFakeInactiveUser 為一個自定義的Hook

然後宣告了一個變數為 nivigate ，並且指定為 useNavigate

類似redirect的方式，以上述程式碼為例

如果使用者登入後，是沒有動作的作態，會先做登出

再來將使用者的路徑導入至 /session-timed-out 的路徑

因此我們也可以針對此路徑新增一個連線逾時的頁面

結語

這一篇是React Router的最後一篇

下一篇會講一下這三十天來參賽心得

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～